{% extends "forum/forum_home.html" %}


{% block page_link %}
    <link rel="stylesheet" type="text/css" href="../../static/forum/css/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}

{% block style %}
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    {{ content_form.media }}
    <!-- 注意！这里引入样式：{{ content_form.media }} -->
    <style>
        #submit_1 {
            width: 100px;
            height: 30px;
            margin-top: 5px;
            border-radius: 3px;
            border: #1E90FF solid 1px;
            color: white;
            line-height: 30px;
            background-color: #1E90FF;
            cursor: pointer;
            float: right;
            margin-right: 1%;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        #id_category {
            width: 100%;
            height: 40px;
            border: none;
            outline: none;
            margin-bottom: 15px;
            padding-right: 2px;
            padding-left: 15px;
        }

        .add_class {
            background: #1E90FF;
        }

        .selectBox {
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: #f72323;
        }

        input::-ms-clear, input::-ms-reveal {
            /*clear去掉叉  reveal去掉眼睛;但是只能去掉ie10及以上，ie9及以下去不掉*/
            display: none;
        }

        .inputCase {
            position: relative;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        .inputCase input.imitationSelect {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            display: block;
            text-indent: 20px;
            cursor: default;
        }

        .inputCase i.fa {
            position: absolute;
            right: 10px;
            top: 10px;
            color: #007AFF;
            font-size: 20px;
            z-index: 99999;
        }

        .fa {
            cursor: pointer;
        }

        .selectUl {
            display: none;
            padding: 0;
            margin: 0;
            border-bottom: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            width: 60.15%;
            z-index: 10000;
            position: absolute;
            background: #FFFFFF;
        }

        .selectUl li {
            height: 36px;
            line-height: 36px;
            list-style: none;
            text-indent: 20px;
            border-bottom: 1px solid #ccc;
        }

        .selectUl li:hover {
            background: #ddd;
        }

        .selectUl li:last-child {
            border-bottom: 0 none;
        }

    </style>
{% endblock %}

{% block right_content %}
    <body style="background: #f5f6f7">
    <form action="{% url 'article' %}" method="post" style="width: 100%;">
        {# {% csrf_token %}#}
        <div class="headline">
            <div class="tab_top">编辑文章</div>
            <button type="submit" id="submit_1">发表</button>
        </div>
        <div style="padding: 0 15%;">


            <div>
                <label for="">标题：</label>
                <input type="text" id="title" name="title" value="" required placeholder="请输入文章标题"
                       style="width: 100%; height: 40px; border:none; border-bottom: solid #cfcfcf 1px; padding: 0 10px 0 10px;outline: none"/>
            </div>
            <div style="width: 100%; z-index: 10000;">
                <label for="">分类：</label>
                <div class="selectBox">
                    <div class="inputCase">
                        <input id="category" name="category" class="imitationSelect fa fa-caret-down" type="text"
                               oulName=""
                               oulId="" value=""/>
                    </div>
                    <ul class="selectUl">
                        {% for category in categorys %}
                            <li oliName="{{ category.name }}" oliId="{{ category.id }}">{{ category.name }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div>
                <label for="id_content"></label>
                {{ content_form }}
            </div>
        </div>
    </form>
    <script src="../../static/system_setup/creat_from/js/jquery-1.10.2.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("forum").className = "add_class";
            document.getElementById("main_page").className = "add-nav-active";
        };

        $(function () {
            //点击右边箭头icon时候
            $(".selectBox .fa").on("click", function (event) {
                $(this).parent().next().toggle();//ul弹窗展开
                if ($(this).hasClass("fa-caret-down")) {
                    $(this).removeClass("fa-caret-down").addClass("fa-caret-up")//点击input选择适合，小图标动态切换
                } else {
                    $(this).addClass("fa-caret-down").removeClass("fa-caret-up")//点击input选择适合，小图标动态切换
                }
                if (event.stopPropagation) {
                    // 针对 Mozilla 和 Opera
                    event.stopPropagation();
                } else if (window.event) {
                    // 针对 IE
                    window.event.cancelBubble = true;
                }
            });

            $(".selectUl li").click(function (event) {
                event = event || window.event;
                $(this).addClass("actived_li").siblings().removeClass("actived_li");    //点击当前的添加。actived_li这个类；其他的移除这个类名
                var oliName = $(this).attr("oliName");                                  //定义一个name属性，获取点击的元素属性赋值到当前，方便动态化传值
                var oliId = $(this).attr("oliId");                                      //定义一个id属性，获取点击的元素属性赋值到当前，方便数据交互传值
                $(this).parent().prev().children().val(oliName);                        //把当前点击的name赋值到显示的input的val里面
                $(this).parent().prev().children().attr("oliName", oliName);             //把当前点击的oliName赋值到显示的input的oliName里面
                $(this).parent().prev().children().attr("oliId", oliId);                 //把当前点击的oliId赋值到显示的input的oliId里面
            });

            //点击任意地方隐藏下拉
            $(document).click(function (event) {
                event = event || window.event;
                $(".inputCase .fa").removeClass("fa-caret-up").addClass("fa-caret-down")//当点隐藏ul弹窗时候，把小图标恢复原状
                $(".selectUl").hide();                                                  //当点击空白处，隐藏ul弹窗
            });
        })
    </script>
    </body>
{% endblock %}